import React, { useState, useEffect } from 'react';
import './CircleProgress.css';

const CircleProgress = ({
  progress = 50,
  size = 200,
  strokeWidth = 12,
  trackColor = '#f0f0f0',
  //progressColor = '#4CAF50',
  textColor = '#333',
  fontSize = 24,
  tickCount = 12,
  showTicks = true,
  showTickNumbers = true
}) => {
  const [animatedProgress, setAnimatedProgress] = useState(0);
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const center = size / 2;

  useEffect(() => {
    const timer = setTimeout(() => {
      setAnimatedProgress(progress);
    }, 100);
    return () => clearTimeout(timer);
  }, [progress]);

  // 渲染刻度线和数字
  const renderTicks = () => {
    if (!showTicks) return null;

    return Array.from({ length: tickCount }).map((_, i) => {
      const angle = (i * 360) / tickCount - 90; // -90度从顶部开始
      const radian = (angle * Math.PI) / 180;
      const tickLength = i % (tickCount / 4) === 0 ? 12 : 8; // 每1/4圆一个长刻度
      const tickWidth = i % (tickCount / 4) === 0 ? 2 : 1;
      
      // 刻度线坐标
      const x1 = center + (radius - strokeWidth / 2 - 5) * Math.cos(radian);
      const y1 = center + (radius - strokeWidth / 2 - 5) * Math.sin(radian);
      const x2 = center + (radius - strokeWidth / 2 - 5 - tickLength) * Math.cos(radian);
      const y2 = center + (radius - strokeWidth / 2 - 5 - tickLength) * Math.sin(radian);

      // 数字坐标（更靠内一些）
      const numRadius = radius - strokeWidth - tickLength - 15;
      const numX = center + numRadius * Math.cos(radian);
      const numY = center + numRadius * Math.sin(radian);

      return (
        <g key={`tick-${i}`}>
          <line
            x1={x1}
            y1={y1}
            x2={x2}
            y2={y2}
            stroke="#fff"
            strokeWidth={tickWidth}
          />
          {showTickNumbers && i % (tickCount / 4) === 0 && (
            <text
              x={numX}
              y={numY}
              textAnchor="middle"
              dominantBaseline="middle"
              fill="#666"
              fontSize={fontSize * 0.6}
            >
              {i * (100 / tickCount) / 100}
            </text>
          )}
        </g>
      );
    });
  };

  // 计算进度条分段
  const progressOffset = circumference - (animatedProgress / 100) * circumference;
  const splitPoint = progress / 2; // 在50%处切换线帽样式

  return (
    <div className="circle-progress-container">
      <svg width={size} height={size} className="circle-progress">
      <defs>
          <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient1">
            <stop offset="0%" stop-color="#31F045"></stop>
            <stop offset="100%" stop-color="#EF4047"></stop>
          </linearGradient>
          <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient2">
            <stop offset="0%" stop-color="#31F045"></stop>
            <stop offset="100%" stop-color="#EF4047"></stop>
          </linearGradient>
        </defs>
        {/* 背景轨道 */}
        <circle
          className="progress-track"
          cx={center}
          cy={center}
          r={radius}
          stroke={trackColor}
          strokeWidth={strokeWidth}
          fill="none"
        />

        {/* 刻度线和数字 */}
        {renderTicks()}

        {/* 前半部分进度（直角） */}
        <circle
          className="progress-bar"
          cx={center}
          cy={center}
          r={radius}
          stroke={"url('#gradient1')"}
          strokeWidth={strokeWidth}
          strokeDasharray={circumference}
          strokeDashoffset={Math.max(progressOffset, circumference * (1 - splitPoint))}
          fill="none"
          transform={`rotate(-90 ${center} ${center})`}
          style={{
            opacity: 1,
            transition: 'stroke-dashoffset 0.8s ease-in-out, opacity 0.3s ease'
          }}
        />

        {/* 后半部分进度（圆角） */}
        <circle
          className="progress-bar"
          cx={center}
          cy={center}
          r={radius}
          stroke="url('#gradient2')"
          strokeWidth={strokeWidth}
          strokeDasharray={circumference}
          strokeDashoffset={progressOffset}
          // strokeLinecap="round"
          fill="none"
          transform={`rotate(-90 ${center} ${center})`}
          style={{
            // strokeDasharray: `${circumference * splitPoint} ${circumference * (1 - splitPoint)}`,
            transition: 'stroke-dashoffset 0.8s ease-in-out'
          }}
        />

        {/* 中心文本 */}
        <text
          x={center}
          y={center}
          textAnchor="middle"
          dominantBaseline="middle"
          className="progress-text"
          fill={textColor}
          fontSize={fontSize}
          fontWeight="400"
        >
          {`${Math.round(animatedProgress) / 100}s`}
        </text>
      </svg>
    </div>
  );
};

export default CircleProgress;